<template>
    <div>
        <div v-if="showLogin" class="login-container">
            <div class="login-wrap">
                <div class="close-icon" @click="showLogin = false"></div>
                <p class="login-title">开通校园旗舰店</p>
                <input
                    v-model="phone"
                    type="number"
                    class="phone-num"
                    placeholder="请输入手机号"
                />
                <div class="verify-code">
                    <input
                        v-model="code"
                        type="number"
                        class="code"
                        placeholder="请输入验证码"
                    />
                    <a
                        href="javascript:;"
                        class="send"
                        :class="disabled ? 'disabled' : ''"
                        :disabled="disabled"
                        @click="sendCode"
                        >{{ btntxt }}</a
                    >
                </div>
                <input
                    v-model="name"
                    type="text"
                    class="recommend-name"
                    placeholder="请填写推荐人名字（选填）"
                />

                <a href="javascript:;" class="btn-summit" @click="fnPhoneLogin"
                    >0元入驻</a
                >
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { phoneLogin, sendVerifyCode } from '@/api/common'
export default {
    name: 'Login',
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            phone: '',
            code: '',
            name: '',
            disabled: false,
            time: 5,
            btntxt: '发送验证码'
        }
    },
    computed: {
        showLogin: {
            set(val) {
                this.$emit('input', val)
            },
            get() {
                return this.value
            }
        },
        ...mapState({
            sales: (state) => state.userInfo.sales
        })
    },
    methods: {
        sendCode() {
            if (!this.disabled) {
                this.time = 60

                sendVerifyCode({
                    type: 1,
                    mobile: this.phone
                })
                    .then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                text: res.msg,
                                type: 'error'
                            })
                        } else {
                            this.$message({
                                text: '验证码发送成功，请注意查收',
                                type: 'success'
                            })
                            this.timer()
                        }
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        },
        // 发送手机验证码倒计时
        timer() {
            if (this.time > 0) {
                this.disabled = true
                this.time--
                this.btntxt = this.time + 's后重新发送'
                setTimeout(this.timer, 1000)
            } else {
                this.time = 0
                this.btntxt = '发送验证码'
                this.disabled = false
            }
        },
        fnPhoneLogin() {
            if (this.phone == '') {
                this.$message({
                    text: '请输入手机号',
                    type: 'warning'
                })
                return
            }

            if (this.code == '') {
                this.$message({
                    text: '请输入验证码',
                    type: 'warning'
                })
                return
            }

            phoneLogin({
                phone: this.phone,
                phone_verify_code: this.code,
                referrer: this.name,
                ...this.sales
            })
                .then((res) => {
                    if (res.code === 0) {
                        this.$message({
                            text: res.msg,
                            type: 'warning'
                        })
                    } else {
                        this.showLogin = false
                        this.$emit('success')
                    }
                })
                .catch((res) => {})
        }
    }
}
</script>

<style lang="less" scoped>
.login-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 109;
    transition: 0.3s;
    .login-wrap {
        width: 6.22rem;
        height: 6.86rempx;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.08rem;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 1.96rem;
        .close-icon {
            width: 0.48rem;
            height: 0.48rem;
            margin-right: 0;
            margin-top: 0.2rem;
            margin-left: calc(100% - 0.48rem - 0.2rem);
            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/btn-close.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .login-title {
            font-size: 0.4rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 0.4rem;
            margin-left: 0.4rem;
            margin-bottom: 0.48rem;
        }
        .phone-num {
            width: 5.42rem;
            height: 0.84rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.08rem;
            border: 1px solid rgba(226, 226, 226, 1);
            margin-left: 0.4rem;
            padding: 0 0.28rem;

            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(136, 144, 156, 1);
        }
        .verify-code {
            display: flex;
            align-items: center;
            margin-top: 0.48rem;
            .code {
                width: 3.06rem;
                height: 0.84rem;
                background: rgba(255, 255, 255, 1);
                border-radius: 0.08rem;
                border: 1px solid rgba(226, 226, 226, 1);
                margin-left: 0.4rem;
                margin-right: 0.32rem;
                padding: 0 0.28rem;

                font-size: 0.28rem;
                font-weight: 400;
                color: rgba(136, 144, 156, 1);
            }
            .send {
                width: 2.04rem;
                height: 0.84rem;
                background: rgba(248, 119, 57, 1);
                border-radius: 0.08rem;
                display: inline-flex;
                color: #fff;
                justify-content: center;
                align-items: center;
            }
            .disabled {
                background-color: #999;
            }
        }
        .recommend-name {
            width: 5.42rem;
            height: 0.84rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.08rem;
            border: 1px solid rgba(226, 226, 226, 1);
            margin-left: 0.4rem;
            margin-top: 0.48rem;
            padding: 0 0.28rem;

            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(136, 144, 156, 1);
        }

        .btn-summit {
            display: flex;
            margin-left: 0.4rem;
            width: 5.42rem;
            height: 0.84rem;
            background: rgba(248, 119, 57, 1);
            border-radius: 0.08rem;
            margin-top: 0.48rem;
            margin-bottom: 0.48rem;
            justify-content: center;
            align-items: center;

            font-size: 0.32rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.32rem;
        }
    }
}
</style>
